<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 10px">
        <el-input
            flex
            placeholder="请输入行业名称"
            v-model="name"
            clearable
            :with="50"
        :span="4">
        </el-input>
          <el-button type="primary" @click.prevent="fnLoadData(1)"  :span="4">查询</el-button>
          <el-button type="danger"  @click.prevent="fnRestFrom" :span="4">
            <i class="el-icon-refresh-left" ></i>清空
          </el-button>
          <el-button  type="primary" @click="fnAdd"  :span="4">新增</el-button>
      <industry-add ref="industryAddDialog"/>
    </el-row>
    <el-table
        :data="bean.list"
        border
        with="700px"
        style="text-align: center">
      <el-table-column
          prop="id"
          label="行业编号"
          :span="3">
      </el-table-column>
      <el-table-column
          prop="name"
          label="行业名称"
          :span="3">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          :span="6">
      </el-table-column>
      <el-table-column
          label="操作"
          :span="1">
        <template slot-scope="scope">
          <el-button  @click="fnUpdate(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page"
        :page-size="bean.pageSize"
        @current-change="fnLoadData"
        :total="bean.total">
    </el-pagination>
    <industry-add ref="industryAddDialog" @closed="fnRestFrom"/>
    <industry-edit ref="industryEditDialog"  @closed="fnRestFrom"/>
  </div>
</template>

<script>
import IndustryAdd from "@/components/IndustryAdd.vue";
import IndustryEdit from "@/components/IndustryEdit.vue";

export default {
  name: "IndustryManagementView",
  components: {IndustryAdd,IndustryEdit},
  methods: {
    fnSearch(){
      this.fnLoadData();
    },
    fnAdd(){
    this.$refs.industryAddDialog.visible=true;
    },
    fnUpdate(row){
      console.log('1111'+row.id);
      let industryEditDialog = this.$refs.industryEditDialog;
      industryEditDialog.fnLoadData(row.id)
      industryEditDialog.visible=true;
    },
    fnLoadData(p){
      this.page = p;
      this.axios.get("http://localhost:8080/industry/industryList", {
        params: {
          name:this.name,
          page:this.page } })
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    },
    fnRestFrom(p=1){
      this.axios.get("http://localhost:8080/industry/industryList", {params: { p } })
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    }
  },

  data() {
    return {
      bean:{
        list:[]
      },
      page:1,
      name:''
    }
  },
  mounted() {
    this.fnLoadData();
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  align-items: center;
}

.el-input {
  margin-right: 10px;
  width:150px;
}

.el-button {
  margin-right: 10px;
}
</style>

